<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import imgCode from '@/components/img-code/img-code.vue';
import md5 from 'md5';
import dragVerify from '@/components/dragVerify/dragVerify.vue';
import { ElMessage } from "element-plus";
import { Post } from "@/utils/api";
import { encrypt,decrypt }from "@/utils/utils";
import Cookies from 'js-cookie';
import {setLocalStorage} from "@/utils";

const router = useRouter();
const username = ref('');
const password = ref('');
const code = ref('');
const mdCode = ref('');
const receivedCode = ref('');
const ischange = ref(false);
const form = ref({isVerifyPass: false});

function getResult(val: string) {
  receivedCode.value = val
}

watch(code, (newVal) => {
  ischange.value = !ischange.value;
  mdCode.value = md5(newVal.toLowerCase());
});

function goToIndex() {
  router.push('/analysis/index');
}

function goRegisterIndex() {
  router.push('/register/index');
}

function goEmailIndex() {
  router.push('/login-email/index');
}

async function login() {
  if (form.value.isVerifyPass) {
    try {
      const encryptedUsername = encrypt(username.value)
      const encryptedPassword = encrypt(password.value)

      const data = {
        username: encryptedUsername,
        password: encryptedPassword
      };

      const r = await Post('/user/login', data);
      if (r.success){
        const str = decrypt(r)
        ElMessage.success(r.message);

        setLocalStorage("Authorization", r.data, 180)
        setLocalStorage("user", str, 180)

        const expirationTime = new Date();
        expirationTime.setTime(expirationTime.getTime() + 60 * 60 * 1000);
        Cookies.set("Authorization", r.data, { expires: expirationTime })
        goToIndex();
      }else {
        ElMessage.error(r.message)
      }

    } catch (error) {
      ElMessage.error('登录失败');
      console.error('Post 请求错误:', error);
    }
  } else {
    ElMessage.error('验证码有误');
  }
}
</script>

<template>
  <div class="input-container">
    <span style="margin-bottom: 10px; color: black; font-size: 20px"><b>账 号 登 录</b></span>
    <el-input
      v-model="username"
      style="width: 290px; height: 50px; margin-bottom: 10px; font-size: 18px;"
      placeholder="请输入账号"
      clearable
    />
    <el-input
      v-model="password"
      style="width: 290px; height: 50px; margin-bottom: 10px; font-size: 18px;"
      type="password"
      placeholder="请输入密码"
      show-password
    />
    <div class="captcha-container">
      <el-input
          v-model="code"
          style="width: 165px; height: 50px; font-size: 18px;"
          placeholder="请输入验证码"
          clearable
      />
      <img-code :mdCode="mdCode" :ischange="ischange" @getResult="getResult"></img-code>
    </div>
    <div class="content">
      <dragVerify v-model:value="form.isVerifyPass"></dragVerify>
    </div>
    <el-button type="primary" class='login-button' @click="login" plain :disabled="!form.isVerifyPass">登录</el-button>

    <div class="footer">
      <button @click="goRegisterIndex">注册账号</button>
      <button @click="goEmailIndex">邮箱登录</button>
    </div>

    <button @click="goToIndex">Go to Index</button>

  </div>
</template>


<style scoped lang="scss">
.input-container {
  border: 2px solid #ccc;
  padding: 10px;
  border-radius: 15px;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.captcha-container {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  margin-bottom: 10px;
}

.content{
  margin-bottom: 10px;
}

.footer {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  width: 290px;
}

.login-button{
  width: 290px;
  height: 40px;
  font-size: 18px;
}

</style>

